<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select name="" id="pro" onchange="changecity(this)"></select>
    <select name="" id="city" onchange="click1"></select>
  </body>
  <script>
    let data = {
      湖南: ["永州", "长沙", "常德"],
      广东: ["广州", "东莞", "佛山"],
      黑龙江: ["哈尔滨", "黑龙江"],
    };
    let pro = document.getElementById("pro");
    let city = document.getElementById("city");
    for (let i in data) {
      let option = document.createElement("option");
      option.innerHTML = i;
      pro.appendChild(option);
    }
    for (let i of data.湖南) {
      let option = document.createElement("option");
      option.innerHTML = i;
      city.appendChild(option);
    }
    function changecity(id) {
      // 清空city里面的子节点
      let options = city.children;
      for (let i = 0; i < options.length; i++) {
        city.removeChild(options[i--]);
      }
      //   获取选中的元素值
      let nowpro = id.options[id.selectedIndex].innerHTML;
      console.log(nowpro); // 广东
      //   对于选定的省份 其中对应的城市进行遍历
      for (let i of data[nowpro]) {
        let option = document.createElement("option");
        option.innerHTML = i;
        city.appendChild(option);
      }
    }
  </script>
</html>
